<template>
  <div>
    <div class="search-list mb-10">
      <div style="display: flex;align-items: center;margin-right: 10px">
        <div>
          <component
              v-bind:is="item.propertyType"
              :property.sync="item"
              v-for="(item, index) in getPower"
              :key="index"
              @updateVal="updateVal"
          ></component>
        </div>
        <el-date-picker
            v-model="timeData"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            size="small"
            class="mr-10"
            :picker-options="pickerOptions1">
        </el-date-picker>
        <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10"><i
            class="el-icon-search"></i>搜索
        </el-button>
        <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
        <downexcel type="inspection" :option="{start_time: timeData[0],end_time: timeData[1],class_id: searchBox.class_id}" v-if="searchBox.class_id && timeData && timeData[0]" :excelName="excelNameFn()"></downexcel>
        <el-button size="small" :disabled="true" v-else>导出午检登记表</el-button>
      </div>
    </div>
    <!--本体列表，数据 -->
    <el-table
        ref="multipleTable"
        :data="arryList"
        :stripe="tableStripe"
        :border="tableBorder"
        tooltip-effect="dark"
        header-cell-class-name="table-text-c"
        cell-class-name="table-text-c">
      <el-table-column
          align="center"
          prop="id"
          label="ID"
          width="80">
      </el-table-column>
      <el-table-column
          align="center"
          label="学生">
        <template slot-scope="scope">
          {{ scope.row.student ? scope.row.student.name : '--' }}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="班级">
        <template slot-scope="scope">
          {{ scope.row.classes ? scope.row.classes.class_name : '--' }}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="异常事项">
        <template slot-scope="scope">
          {{ scope.row.temperature }}°C
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="create_time"
          label="创建时间">
      </el-table-column>
      <el-table-column
          label="操作"
          width="120"
          align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="deletefn(scope.row)" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
          background
          :page-size="page.pagesize"
          :current-page="page.pageindex"
          layout="total, prev, pager, next"
          :total="page.total"
          @current-change="handleSizeChange"></el-pagination>
    </el-col>
    <div class="height40"></div>
    <addTrainingUser :visible.sync="addTrainVisible" @InitFn="InitFn" :trainningId="trainningId"></addTrainingUser>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import {afternoon_check_index, afternoon_check_delete} from '@/api/admin/ClassDynamics'

export default {
  components: {},
  data() {
    return {
      timeData: '',
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      // 页数
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      addTrainVisible: false,
      trainningId: 0,
      searchBox: {
        class_id: '',
        section_id: '',
        start_time: '',
        end_time: '',
        parent_id: '',
        cate_id: ''
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() //  - 8.64e7
        }
      },
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      treeList: [],
      treeChildList: [],
      excelName: ''
    }
  },
  watch: {},
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    async InitFn() {
      let option_ = JSON.parse(JSON.stringify(this.searchBox))
      option_.p = this.page.pageindex
      afternoon_check_index(option_).then(res => {
        console.log('res首页数据:', res)
        for (let item of res.list.data) {
          if (item.body) {
            item.body = JSON.parse(item.body)
          }
        }
        this.arryList = res.list.data;
        this.page.total = res.list.total;
      })
      // let data = await this.$fetch(this.api.classActive.training.index, option_)
      // if (!data.code) {
      //   this.arryList = res.list.data;
      //   this.page.total = res.list.total;
      // }
    },
    searchFn(option) {
      if (option === 'refresh') {
        let newGetPower = JSON.parse(JSON.stringify(this.getPower))
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower;
        this.searchBox.class_id = '';
        this.searchBox.section_id = '';
        this.searchBox.start_time = ''
        this.searchBox.end_time = ''
        this.searchBox.parent_id = ''
        this.searchBox.cate_id = ''
        this.timeData = []
      } else {
        if (this.timeData && this.timeData.length) {
          this.searchBox.start_time = this.timeData[0]
          this.searchBox.end_time = this.timeData[1]
        }
      }
      this.page.pageindex = 1;
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    deletefn(row) {
      this.$confirm('确认永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelCalss(row.id)
      }).catch(() => {
      })
    },
    async detelCalss(id) {
      afternoon_check_delete({id: id}).then(res => {
        if (!res.code) {
          this.$message.success(res.msg)
          this.InitFn()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    excelNameFn(){
      if(this.excelName && this.timeData && this.timeData.length){
        return `${this.excelName}-${this.timeData[0].split('-').join('')}至${this.timeData[1].split('-').join('')}`
      }
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      console.log('数据班级',option)
      if(option.select[1].valueText){
        for(let item of option.select[1].list){
          if(item.id===option.select[1].valueText){
            this.excelName = item.name
          }
        }
      }else{
        this.excelName = ''
      }
      if (option.input) {
        this.searchBox[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchBox[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchBox[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    }
  },
  mounted() {
  },
}
</script>
<style>
.lead-list {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fddeae;
  margin-bottom: 5px;
  border-radius: 2px;
  padding: 5px 0;
}

.lead-list:last-child {
  margin-bottom: 0;
}

.lead-list span {
  margin-right: 30px;
}
</style>

